import React, { useEffect, useState } from "react";
import style from "./Home.module.scss";
import MatchCard from "./MatchCard/MatchCard.tsx";
import { getRankPoint, queryCurrentSummoner } from "../../API/getSumInfo.ts";
import SumInfoCard from "./SummerCard/SumInfo/SumInfoCard.tsx";
import ChampCard from "./SummerCard/ChampCard/ChampCard.tsx";
import { ISummer } from "../../interface/SummonerInfo.ts";
import { RankStatus } from "../../interface/RankInfo.ts";
import { getOtherSummerById } from "../../API/getOtherSummer.ts";
interface ISumInfo {
  id?: number;
}
const Home: React.FC<ISumInfo> = (props: ISumInfo) => {
  // const [id, setId] = useState(0);
  const [curSum, setCurSum] = useState<ISummer>({} as ISummer);
  const [rankInfo, setRankInfo] = useState([] as RankStatus[]);
  // const [sumInfo,setSumInfo]=useState({})
  useEffect(() => {
    if (props.id) {
      getOtherSummerById(props.id + "")
        .then((r) => {
          setCurSum(r);
          return r.puuid;
        })
        .then((puuid: string) => {
          getRankPoint(puuid).then((rankinfo) => {
            setRankInfo(rankinfo);
          });
        });
    } else {
      queryCurrentSummoner()
        .then((r) => {
          setCurSum(r);
          return r.puuid;
        })
        .then((puuid: string) => {
          getRankPoint(puuid).then((rankinfo) => {
            setRankInfo(rankinfo);
          });
        });
    }
  }, [props]);
  return (
    <div className={style.home}>
      <div className={style.SumCard}>
        <SumInfoCard curSum={curSum} rankInfo={rankInfo} />
        <ChampCard />
      </div>
      {/*<SummerCard id={id} />*/}
      <MatchCard puuid={curSum.puuid} />
    </div>
  );
};

export default Home;
